﻿.switch {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

    .switch .switch-core {
        margin: 0;
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #dcdfe6;
        cursor: pointer;
        transition: border-color .3s,background-color .3s;
        vertical-align: middle;
    }

        .switch .switch-core:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 50%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

        .switch .switch-core:before {
            content: attr(data-inner-text);
            position: absolute;
            top: 1px;
            left: calc(100% - 17px);
            transition: all .3s;
            font-size: 80%;
            color: #606266;
        }

    .switch.is-checked .switch-core:after {
        left: 100%;
        margin-left: -17px;
    }

    .switch.is-checked .switch-core:before {
        left: 5px;
        color: #fff;
    }

    .switch .switch-label {
        margin-left: 10px;
        cursor: pointer;
    }

    .switch.is-disabled {
        opacity: 0.6;
    }

    .switch.is-disabled, .switch.switch.is-disabled .switch-core, .switch.switch.is-disabled .switch-label {
        cursor: not-allowed;
    }

    .switch .switch-inner-text {
        font-size: 80%;
    }

.form-inline .switch,
.form-row .switch {
    height: 35px;
}

@media (min-width: 576px) {
    .form-inline .switch {
        width: 196px;
    }
}
